<template>
    <pos-dialog title="Shipping address" :visible="visible" @close="close">
        <div class="pos-customer-row column-gap-2">
            <div class="form-group pos-customer-col">
                <div class="form-input-label">Name <sub>*</sub></div>
                <input type="text" class="form-control" :class="{'invalid':errors.first_name}" autocomplete="off"
                       v-model="address.first_name">
                <div class="invalid-feedback" v-if="errors.first_name">{{ errors.first_name }}</div>
            </div>
            <div class="form-group pos-customer-col">
                <div class="form-input-label">Phone</div>
                <input type="text" class="form-control" autocomplete="off" v-model="address.phone">
            </div>
        </div>
        <div class="form-group">
            <div class="form-input-label">Address</div>
            <div>
                <vue-google-autocomplete
                        ref="address"
                        id="shipping"
                        classname="form-control"
                        autocomplete="off"
                        placeholder="Please type your address"
                        v-on:placechanged="getAddressData"
                        :country="['irl','gb']"
                />
            </div>
        </div>
        <div class="pos-customer-row column-gap-2">
            <div class="form-group pos-customer-col">
                <div class="form-input-label">City</div>
                <input type="text" class="form-control" autocomplete="off" v-model="address.city">
            </div>
            <div class="form-group pos-customer-col">
                <div class="form-input-label">Post Code</div>
                <input type="text" class="form-control" autocomplete="off" v-model="address.postcode">
            </div>
        </div>
        <div class="pos-customer-row column-gap-2">
            <div class="form-group pos-customer-col">
                <div class="form-input-label">Country</div>
                <input type="text" class="form-control" autocomplete="off" v-model="address.country">
            </div>
            <div class="form-group pos-customer-col">
                <div class="form-input-label">State</div>
                <input type="text" class="form-control" autocomplete="off" v-model="address.state">
            </div>
        </div>
        <div class="form-group">
            <button class="btn btn-primary form-control text-uppercase" @click="onSubmit">Save Shipping Address</button>
        </div>
    </pos-dialog>
</template>

<script>
import VueGoogleAutocomplete from "./VueGoogleAutocomplete.vue";

export default {
    name: "CreateShippingAddress",
    components: {VueGoogleAutocomplete},
    props: {
        value: false,
        defaultAddress: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {
        return {
            visible: false,
            autocomplete: null,
            autocomplateText: '',
            address: {},
            errors: {
                first_name: null
            }
        }
    },
    watch: {
        value(val) {
            if (val !== this.visible) {
                this.visible = val;
            }
        },
        defaultAddress(val) {
            this.address = val;
        }
    },
    methods: {
        close() {
            this.$emit('input', false);
        },
        getAddressData(addressData, placeResultData, id) {
            console.log(addressData);
            console.log(placeResultData);
            let {
                route,
                locality,
                country,
                postal_code,
                postal_code_prefix,
                administrative_area_level_1,
                administrative_area_level_2,
                postal_town
            } = addressData;

            this.address.adress_1 = route;

            if (locality) {
                this.address.city = locality;
            } else {
                if (postal_town) {
                    this.address.city = postal_town;
                }
            }

            if (country) {
                this.address.country = country;
            }

            if (administrative_area_level_1) {
                this.address.state = administrative_area_level_1;
            }

            if (postal_code) {
                this.address.postcode = postal_code;
            } else {
                if (postal_code_prefix) {
                    this.address.postcode = postal_code_prefix;
                }
            }

            this.$forceUpdate();
        },
        onSubmit() {
            const {first_name} = this.address;
            if (!first_name) {
                this.errors.first_name = 'This field is required';
                return false;
            } else {
                this.errors.first_name = null;
            }
            this.$emit('submit', this.address);
            this.$emit('input', false);
        }
    },
    created() {
        this.visible = this.value;
        this.address = this.defaultAddress;
    },
    mounted() {

    }
}
</script>

<style scoped>

</style>